<!-- 标签组件 -->
<template>
	<view class="tabs flex flex-dir-c" :style="{height: height}">
		<view style="width: 100%;">
			<slot name="nav" />
		</view>
		 <!-- :style="[$u.addStyle(itemStyle)]" -->
		<view class="f1" style="width: 100%;" :style="itemStyle">
			<u-tabs :lineWidth="lineWidth" :lineHeight="lineHeight" :isScroll="list.length>=6?true:false" lineColor="#FFBA2F" activeColor="#FFBA2F" :background="background"
				:name="keyName" inactiveColor="#666666" :list="list" :current="swiperCurrent"
				@change="change"></u-tabs>
			<swiper :style="{'height': `calc(100% - 44px)`}" class="swiper" :current="swiperCurrent"
				@change="swiperChange">
				<swiper-item :style="swiperItemStyle" class="swiper-item" v-for="(item, index) in list.length"
					:key="index">
					<scroll-view scroll-y class="scroll" @scrolltolower='scrolltolower' show-scrollbar>
						<slot :name="index+'tabs'"></slot>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'Tabs',
		props: {
			swiperItemStyle: {
				type: [String, Object],
				default: ""
			},
			lineWidth: {
				type: [String, Number],
				default: 20
			},
			lineHeight: {
				type: [String, Number],
				default: 3
			},
			list: {
				type: Array,
				default: () => []
			},
			background: {
				type: String,
				default: '#fff'
			},
			keyName: {
				type: String,
				default: 'c_name'
			},
			itemStyle: {
				type: [String, Object],
				default: ""
			},
			swiperCurrent: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				height: '100%',
			}
		},
		mounted() {
			/* let pages = getCurrentPages()
			let current = pages[pages.length - 1]
			let url = current.route
			let bottomSafe = 51
			// #ifdef MP-WEIXIN
			let system = wx.getSystemInfoSync()
			bottomSafe = (system.screenHeight - system.safeArea.bottom) + 51
			// #endif

			if (['pages/index/order', 'pages/index/store']
				.indexOf(
					url) > -1) {
				this.height = `calc(100% - ${bottomSafe}px)`
			} else {
				this.height = '100%'
			} */
		},
		methods: {
			scrolltolower() {
				this.$emit('scrolltolower')
			},
			change(e) {
				this.$emit('change', e)
			},
			swiperChange({
				detail: {
					current
				}
			}) {
				this.$emit('swiperChange', current)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		// height: 100%;
		// height: calc(100% -  constant(safe-area-inset-bottom));
		// height: calc(100% -  env(safe-area-inset-bottom));
	}
</style>